<template>
  <view :class="['otc', { dark: theme == 'dark' }]">
    <!-- 我要买，我要卖 -->
    <view :class="['bglist1', 'funs', { darksss: theme == 'dark' }]">
      <view style="width: 48vw">
        <u-tabs
          :list="list1"
          :is-scroll="false"
          font-size="32"
          active-color="#ffffff"
          inactive-color="#dadada"
          :show-bar="false"
          :bg-color="false"
          :current="current"
          @change="change"
        ></u-tabs>
      </view>

      <view class="side">
        <view
          class="order"
          @click="funsItemClick(1)"
        >
          <u-icon
            size="40"
            name="order"
            color="#ffffff"
            @click="
              uni.navigateTo({
                url:
                  current == 0 ? '/pages/business/Purchaserecord' : '/pages/business/Sellingrecord'
              })
            "
          >
          </u-icon>
        </view>
      </view>
    </view>

    <!-- 显示可以交易的法币类型 -->
    <view :class="['bglist2', 'funs', { darksss: theme == 'dark' }]">
      <view style="width: 420rpx">
        <u-tabs
          :list="list2"
          :is-scroll="false"
          :bg-color="false"
          inactive-color="#909090"
          :current="current2"
          @change="change2"
        >
        </u-tabs>
      </view>
    </view>

    <!-- 显示法币市场正在销售的信息 -->
    <view :class="['bglist3', 'funs', { darksss: theme == 'dark' }]">
      <view class="wrap">
        <!-- 修改样式 -->
        <u-gap
          height="20"
          bg-color=""
        ></u-gap>
        <u-table
          border-color="#22253c00"
          bg-color="#22253c00"
          align="left"
          padding="14rpx 0"
          v-for="(item, index) in dataList"
          :key="index"
        >
          <view :class="['juzonucom', 'tool-card', { darksss: theme == 'dark' }]">
            <view :class="['wrap', 'juzonucg', { darksss: theme == 'dark' }]">
              <u-tr class="u-tr">
                <u-td class="u-td">
                  <view class="fuwen">{{ item.nickName.substring(0, 1) }}</view>
                </u-td>
                <u-td class="juzonuc u-td">
                  <view></view>
                </u-td>
                <u-td class="juzon u-td">
                  <view class="fuwenn">{{ item.nickName }}</view>
                </u-td>
              </u-tr>
            </view>

            <u-line color="#5559691f"></u-line>
            <u-gap
              height="20"
              bg-color=""
            ></u-gap>

            <u-tr class="u-tr">
              <u-td>{{ $t('bico.W00') }}</u-td
              ><u-td class="juzonuc"></u-td>

              <u-td
                class="redee juzon"
                v-show="current == 0"
                >{{ item.unitPrice }} CNY</u-td
              >
              <u-td
                class="juzon greee"
                v-show="current == 1"
                >{{ item.unitPrice }} CNY</u-td
              >
            </u-tr>

            <u-tr class="u-tr">
              <u-td>{{ $t('bico.W02') }}</u-td
              ><u-td class="juzon">{{ item.restNumber.toFixed(6) }} {{ item.coin }}</u-td>
            </u-tr>

            <u-tr class="u-tr">
              <u-td>{{ $t('bico.W01') }}</u-td>
              <u-td class="juzon"
                >{{ item.lowPrice }} CNY -
                {{ (item.restNumber * item.unitPrice).toFixed(2) }} CNY</u-td
              >
            </u-tr>

            <u-line color="#5559691f"></u-line>
            <!-- <u-gap height="20" bg-color=""></u-gap> -->
            <u-tr class="u-tr">
              <u-td>
                <!-- 支付宝 -->
                <u-col
                  span="1"
                  v-if="item.payMethod == 'ALI_PAY'"
                >
                  <view class="">
                    <image
                      class="funsItemImage"
                      src="../../static/business/zfb.png"
                    ></image>
                  </view>
                </u-col>
                <!-- 微信 -->
                <u-col
                  span="1"
                  v-else-if="item.payMethod == 'WE_CHAT'"
                >
                  <view class="">
                    <image
                      class="funsItemImage"
                      src="../../static/business/wx.png"
                    ></image>
                  </view>
                </u-col>
                <!-- 银行卡 -->
                <u-col
                  span="1"
                  v-else="item.payMethod == 'BANK'"
                >
                  <view class="">
                    <image
                      class="funsItemImage"
                      src="../../static/business/yhk.png"
                    ></image>
                  </view>
                </u-col>
              </u-td>

              <u-td class="juzonuc"> </u-td>

              <u-td class="juzon">
                <view class="">
                  <u-button
                    type="error"
                    size="mini"
                    @click="showModelFun(item)"
                    v-if="current == 0"
                    >{{ $t('bico.W03') }}
                  </u-button>
                  <u-button
                    type="success"
                    size="mini"
                    @click="showModelFun(item)"
                    v-else
                    >{{ $t('bico.W04') }}</u-button
                  >
                </view>
              </u-td>
            </u-tr>
          </view>
          <u-gap
            height="20"
            bg-color=""
          ></u-gap>
        </u-table>
        <!-- 修改样式 -->
      </view>

      <!-- 购买 出售 下拉 弹窗 -->

      <u-popup
        v-model="showModal"
        mode="bottom"
        border-radius="28"
        :height="current == 1 ? '74%' : '64%'"
      >
        <view
          class="box"
          :style="
            current == 1 ? 'height: 480px;line-height: 1.8;' : 'height: 420px;line-height: 1.8;'
          "
        >
          <view class="coin">
            <view>
              <view class="name">{{ sideMap[current] }}{{ ad.coin }}</view>
            </view>
            <view> </view>
          </view>

          <view class="type">
            <view
              @click="changeType(0)"
              :class="form.type == 0 ? 'active' : ''"
            >
              {{ $t('bico.W05') }} {{ sideMap[current] }}
            </view>
            <view
              @click="changeType(1)"
              :class="form.type == 1 ? 'active' : ''"
            >
              {{ $t('bico.W06') }} {{ sideMap[current] }}
            </view>
          </view>

          <view class="input">
            <view
              ><input
                @blur="blur"
                @focus="focus"
                class="uni-input"
                cursor-spacing="0"
                :adjust-position="false"
                v-model="form.volume"
                type="digit"
                :placeholder="placeholder[form.type]"
              />
            </view>
            <view
              ><text class="i cny">{{ form.type == 1 ? 'USDT' : 'CNY' }}</text> |
              <text
                @click="allBuy"
                class="i all"
                >{{ $t('bico.W07') }} {{ sideMap[current] }}</text
              ></view
            >
          </view>
          <view
            class="input"
            v-show="current == 1"
          >
            <view
              ><input
                class="uni-input"
                cursor-spacing="0"
                @focus="accountShowFun"
                :adjust-position="false"
                v-model="form.accountLabel"
                type="text"
                :placeholder="$t('bico.W09')"
              />
              <u-select
                mode="mutil-column-auto"
                v-model="accountShow2"
                :list="checkboxList"
                @confirm="confirm2"
              >
              </u-select>
            </view>
            <view
              ><text class="i cny"></text>
              <text
                @click="accountShowFun"
                class="i all"
                >{{ $t('bico.W08') }}</text
              >
            </view>
          </view>

          <!-- 间隔槽 -->
          <u-gap
            height="100"
            bg-color=""
          ></u-gap>
          <view class="amount">
            <view class="t-p amountp">{{ $t('bico.W10') }}</view>
            <view class="p">{{ ad.restNumber }} USDT</view>
          </view>
          <!-- 加一条线 -->
          <u-line color="#5559691f"></u-line>
          <!-- 间隔槽 -->
          <u-gap
            height="100"
            bg-color=""
          ></u-gap>
          <view class="amount">
            <view class="t-p amountp">{{ $t('bico.W11') }}</view>
            <view class="p">{{ ad.unitPrice }} CNY</view>
          </view>
          <!-- 加一条线 -->
          <u-line color="#5559691f"></u-line>
          <!-- 间隔槽 -->
          <u-gap
            height="100"
            bg-color=""
          ></u-gap>
          <view
            class="amount"
            v-show="form.type == 0"
          >
            <view class="t-p amountp">{{ $t('bico.W12') }}</view>
            <view class="p">{{ ad.lowPrice }} - {{ ad.totalPrice }} CNY</view>
          </view>
          <view
            class="amount"
            v-show="form.type == 1"
          >
            <view class="t-p amountp">{{ $t('bico.W13') }}</view>
            <view class="p">{{ ad.lowNumber }} - {{ ad.restNumber }} </view>
          </view>
          <!-- 加一条线 -->
          <u-line color="#5559691f"></u-line>
          <!-- 间隔槽 -->
          <u-gap
            height="100"
            bg-color=""
          ></u-gap>
          <view class="amount">
            <view class="t-p amountp">{{ $t('bico.W14') }}</view>
            <view class="p">{{ showVolume }} USDT</view>
          </view>
          <!-- 加一条线 -->
          <u-line color="#5559691f"></u-line>
          <!-- 间隔槽 -->
          <u-gap
            height="100"
            bg-color=""
          ></u-gap>
          <view class="amount">
            <view class="t-p amountp">{{ $t('bico.W15') }}</view>

            <!-- <view class="p amountpp">{{showAmount}} {{form.type == 1?'USDT':'CNY'}}</view> -->
            <view
              v-if="form.type == 0"
              class="p amountpp"
              >{{ showAmount }} CNY
            </view>
            <view
              v-if="form.type == 1"
              class="p amountpp"
              >{{ showAmount * ad.unitPrice }} CNY
            </view>
          </view>
          <!-- 加一条线 -->
          <u-line color="#5559691f"></u-line>

          <!-- 间隔槽 -->
          <u-gap
            height="100"
            bg-color=""
          ></u-gap>
          <view class="btns">
            <view
              @click="cancel"
              class="btn cancel"
              >{{ $t('bico.W16') }}</view
            >
            <view
              @click="submit"
              class="btn cancell"
              :class="form.volume ? 'submit' : 'cancel'"
              >{{ $t('bico.W17') }}</view
            >
          </view>
        </view>
      </u-popup>

      <!-- 交易密码弹窗  55%宽度内外重合-->

      <u-popup
        v-model="passShow"
        mode="center"
        border-radius="14"
      >
        <view class="passbox">
          <view class="input">
            <view
              ><input
                @blur="blur"
                @focus="focus"
                class="uni-input"
                cursor-spacing="0"
                :adjust-position="false"
                v-model="form.password"
                type="password"
                :placeholder="$t('bico.W20')"
              />
            </view>
            <view><text class="i cny"></text> <text class="i all"></text></view>
          </view>
          <view class="btns">
            <view
              @click="
                form.password = '';
                passShow = false;
              "
              class="btn cancel"
              >{{ $t('bico.W18') }}</view
            >
            <view
              @click="sellOrBuy"
              class="btn cancell"
              :class="form.password ? 'submit' : 'cancel'"
              >{{ $t('bico.W19') }}</view
            >
          </view>
        </view>
      </u-popup>
    </view>
  </view>
</template>

<script>
import { domain } from '@/common/domain.js';
import { mapState, mapActions, mapGetters } from 'vuex';
import uniPopup from '@/components/uni-popup2.vue';
import {
  tradeList,
  cnyPayList,
  legalMgrPage,
  tradeBuy,
  tradeSell,
  contractOptionConfig
} from '../../common/apiString.js';
import { myMixins } from '@/common/myMixins.js'; //加入全局下拉刷新
export default {
  mixins: [myMixins],
  data() {
    return {
      ad: {},
      form: {
        payWay: '',
        accountId: '',
        accountLabel: '',
        type: 0, //类型
        side: undefined,
        password: '',
        volume: undefined, //数量
        advertId: undefined //不清楚
      },
      showModal: false,
      list1: [
        {
          name: this.$t('bico.W21')
        },
        {
          name: this.$t('bico.W22')
        }
      ],
      current: 0,
      accountShow2: false,
      payMeMap: {
        ALI_PAY: this.$t('bico.W23'),
        WE_CHAT: this.$t('bico.W24'),
        BANK: this.$t('bico.W25')
      },
      checkboxList: [
        {
          label: this.$t('bico.W23'),
          value: 'ALI_PAY',
          children: [
            {
              label: this.$t('bico.W23'),
              value: 'ALI_PAY'
            },
            {
              label: this.$t('bico.W23'),
              value: 'ALI_PAY'
            }
          ]
        },
        {
          label: this.$t('bico.W24'),
          value: 'WE_CHAT',
          children: []
        },
        {
          label: this.$t('bico.W25'),
          value: 'BANK',
          children: []
        }
      ],
      list2: [
        /* {
										name: '全部',
										value:''
									} ,*/

        {
          name: 'USDT',
          value: 'USDT'
        },
        {
          name: 'ETH',
          value: 'ETH'
        },
        {
          name: 'BTC',
          value: 'BTC'
        }
      ],
      placeholder: {
        0: this.$t('bico.W26'),
        1: this.$t('bico.W27')
      },
      sideMap: {
        0: this.$t('bico.W28'),
        1: this.$t('bico.W29')
      },
      showVolume: 0,
      showAmount: 0,
      current: 0,
      current2: 0,
      dataList: [],
      myOtc: {},
      passShow: false
    };
  },
  computed: {
    ...mapState({
      theme: state => state.theme
    })
  },
  watch: {
    'form.volume'(v) {
      if (!v) {
        return;
      }
      if (this.form.type == 0) {
        this.showVolume = (this.form.volume / this.ad.unitPrice).toFixed(6);
        this.showAmount = this.form.volume;
      } else {
        this.showVolume = parseFloat(this.form.volume).toFixed(6);
        this.showAmount = parseFloat(this.form.volume);
      }
    }
  },
  onLoad() {
    //下面一行就是设置上面标题的代码，复制修改括号里的标题，放在页面的onLoad()方法里最后面就可以了，
    this.$utils.setTitle(this.$t('bico.W38'));

    //下面这三行注释的代码
    // uni.setNavigationBarTitle({
    // 	title: this.$t('login').otc
    // })

    this.$utils.setTheme(this.theme);
  },

  onShow() {
    this.getCoinConfig();
    this.getOtcList();
    this.getPayWayList();
    this.legalMgrPage();
  },
  methods: {
    sellOrBuy() {
      var that = this;
      if (that.$utils.isEmpty(that.form.password)) {
        return false;
      }

      var data = {};
      data.value = that.form.volume;
      data.type = that.form.type == 1 ? 0 : 1;
      data.password = that.form.password;
      data.payPwd = that.form.password;
      if (that.current == 0) {
        //购买
        data.sellId = that.ad.sellId;
      } else {
        // 出售
        data.buyId = that.ad.buyId;
        data.paymentId = that.form.accountId;
      }
      that.$utils.initDataToken(
        {
          url: that.current == 1 ? tradeSell : tradeBuy,
          data,
          type: 'post'
        },
        (res, msg) => {
          if (msg.length > 0) {
            showLayer(msg);
          } else {
            setTimeout(() => {
              uni.hideLoading();
              that.passShow = false;
              that.showModal = false;
              that.getOtcList();
              that.$utils.showLayer(this.$t('bico.W30'));
            }, 1500);
          }
        }
      );
    },
    accountShowFun() {
      console.log(this.checkboxList);
      this.accountShow2 = true;
    },
    getPayWayList() {
      var that = this;
      that.$utils.initDataToken(
        {
          url: cnyPayList,
          data: {
            size: 100
          },
          type: 'post'
        },
        (res, msg) => {
          that.paywayArr = res.records;
          //that.change(that.current)
        }
      );
    },
    confirm2(e) {
      this.form.payWay = e[0].value;
      this.form.accountLabel = e[0].label;
      if (this.current != 0) {
        this.form.accountId = e[1].value;
        this.form.accountLabel = e[1].label;
      }
    },
    legalMgrPage() {
      this.$utils.initDataToken(
        {
          url: legalMgrPage,
          type: 'post'
        },
        (res, msg) => {
          console.log(res);
          this.myOtc = res;
          uni.setStorageSync('myOtc', res);
        }
      );
    },
    showModelFun(item) {
      if (this.myOtc.realStatus != '1') {
        this.$utils.showLayer(this.$t('bico.W31'));
        return;
      }
      this.ad = item;
      this.showModal = true;
      var that = this;

      var arr = that.paywayArr;
      that.checkboxList = [
        {
          label: that.payMeMap[item.payMethod],
          value: item.payMethod,
          children: []
        }
      ];

      if (arr.length > 0) {
        arr.forEach(element => {
          if (element.type == item.payMethod) {
            that.checkboxList[0].children.push({
              label: element.idcard,
              value: element.paymentId
            });
          }
        });
      }
    },
    allBuy() {
      if (this.form.type == 0) {
        this.form.volume = this.ad.restNumber * this.ad.unitPrice;
      } else {
        this.form.volume = this.ad.restNumber;
      }
    },
    changeType(type) {
      this.form.type = type;
      this.form.volume = undefined;
      this.showAmount = 0;
      this.showVolume = 0;
    },
    cancel() {
      this.showModal = false;
    },
    submit() {
      //限制 数量 金额， 同时换算成金额来比较
      this.form.volume = Number(this.form.volume);
      if (this.form.type == 0) {
        //进行金额数量验证
        if (this.form.volume > this.ad.totalPrice) {
          //金额
          this.$utils.showLayer(this.$t('bico.W32'));
          return;
        }

        if (this.form.volume > (this.ad.restNumber * this.ad.unitPrice).toFixed(2)) {
          this.$utils.showLayer(this.$t('bico.W33'));
          return;
        }
        if (this.form.volume < this.ad.lowPrice) {
          this.$utils.showLayer(this.$t('bico.W34'), +this.ad.lowPrice);
          return;
        }
      }

      if (this.form.type == 1) {
        if (this.form.volume > this.ad.restNumber) {
          //数量
          this.$utils.showLayer(this.$t('bico.W35'));
          return;
        }
        if (this.form.volume < this.ad.lowNumber) {
          //数量
          this.$utils.showLayer(this.$t('bico.W36'), +250);
          return;
        }
        if (this.form.volume * this.ad.unitPrice < this.ad.lowPrice) {
          //数量
          this.$utils.showLayer(this.$t('bico.W37'), +this.ad.lowPrice);
          return;
        }
      }
      if (!this.form.volume) {
        this.$utils.showLayer(this.placeholder[this.form.type]);
        return;
      }
      this.passShow = true;
    },
    //获得焦点
    focus(e) {
      console.log('dfsj');
    },
    //失去焦点
    blur() {
      console.log('dfsj2222');
    },
    priceCancel() {
      this.form.volume = undefined;
    },
    change(index) {
      var that = this;
      that.current = index;
      // that.checkboxList.forEach(item => {
      // 	delete item.children
      // })
      that.form.payWay = '';
      that.form.accountId = '';
      that.form.accountLabel = '';
      //that.accountShow = true

      this.getOtcList();
    },
    change2(index) {
      this.current2 = index;
      this.getOtcList();
    },
    getOtcList() {
      var that = this;
      console.log(that.list2[that.current2].value);
      // uni.showLoading();
      that.$utils.initDataToken(
        {
          url: tradeList,
          data: {
            type: that.current,
            coin: that.list2[that.current2].value,
            payMethod: '',
            price: '',
            number: '',
            current: 1,
            size: 9
          },
          type: 'post'
        },
        (res, msg) => {
          uni.hideLoading();
          console.log(res);
          that.dataList = res.records;
        }
      );
    },
    getCoinConfig() {
      var that = this;
      that.$utils.initDataToken(
        {
          url: contractOptionConfig,
          type: 'post'
        },
        (res, msg) => {
          that.list2 = [];
          res.forEach(item => {
            that.list2.push({
              name: item,
              value: item
            });
          });
        }
      );
    },
    //路由开始
    funsItemClick(index) {
      if (index == 1) {
        uni.navigateTo({
          url:
            this.current == 0 ? '/pages/business/Purchaserecord' : '/pages/business/Sellingrecord'
        });
        // uni.navigateTo({
        // 	url: '/pages/otc/Orderrecord' //法币订单
        // })
      }
      if (index == 2) {
        uni.navigateTo({
          url: '/pages/otc/Orderdetailsdd' //广告详情
        });
      }
    }
    //路由结束
  }
};
</script>

<style lang="scss">
page {
  background: #f7f7f7;
}
.passbox {
  background: #fff;
  display: flex;
  flex-direction: column;
  padding: 30upx 30upx;
  font-size: 28upx;
  border-radius: 2vw;

  .input {
    line-height: 1.8;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 14upx 10upx;
    margin: 20upx 0;
    border: 0.5px solid #b2b9deab;
    border-radius: 4px;

    input {
      color: #0952c3;
      font-size: 28upx;
    }

    .cny {
      line-height: 1.8;
      margin-right: 20upx;
      color: #0952c3;
    }

    .all {
      line-height: 1.8;
      margin-left: 20upx;
      color: #0952c3;
    }
  }

  .btns {
    line-height: 1.8;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
    padding: 10upx 0;

    .btn {
      display: block;
      width: 48%;
      height: 70upx;
      line-height: 70upx;
      text-align: center;
      color: #fff;
      border-radius: 0;
      font-size: 28upx;
      border-radius: 4px;
    }

    .cancel {
      background: #2979ff;
    }

    .submit {
      background: #0952c3;
    }
  }
}

.box {
  position: fixed;
  bottom: 12vw;
  background: #fff;
  line-height: 1.8;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 690upx;
  padding: 14px 15px;
  font-size: 28upx;

  .coin {
    line-height: 1.8;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-bottom: 10upx;

    .name {
      font-size: 14px;
      padding-bottom: 10px;
      color: #ff5722;
      font-weight: 700;
    }

    .price {
      color: #0952c3;
    }

    .icon {
      width: 40px;
      height: 40px;
    }
  }

  .amountp {
    font-size: 12px;
    padding-bottom: 0px;
    /* color: #FF5722; */
    font-weight: 700;
  }

  .amountpp {
    font-size: 12px;
    padding-bottom: 0px;
    color: #ff5722;
    font-weight: 700;
  }

  .type {
    display: flex;
    flex-direction: row;
    padding: 10upx 0;

    view {
      margin-right: 30upx;
      position: relative;
      padding: 10upx 0;

      &.active {
        color: #2979ff;

        &:after {
          content: '';
          position: absolute;
          left: 50%;
          bottom: 0;
          transform: translateX(-50%);
          width: 100%;
          height: 0;
          border-bottom: 1px solid #2979ff;
        }
      }
    }
  }

  .input {
    line-height: 1.8;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
    padding: 14upx 10upx;
    margin: 20upx 0;
    border: 0.5px solid #b2b9deab;
    border-radius: 4px;

    input {
      color: #0952c3;
      font-size: 28upx;
    }

    .cny {
      line-height: 1.8;
      margin-right: 20upx;
      color: #0952c3;
    }

    .all {
      line-height: 1.8;
      margin-left: 20upx;
      color: #0952c3;
    }
  }

  .amount {
    line-height: 1.8;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 10upx 0;

    .p {
      font-size: 12px;
      /*color: #0952C3;*/

      padding-bottom: 0px;
      /* color: #FF5722; */
      font-weight: 700;
    }
  }

  .btns {
    line-height: 1.8;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
    padding: 10upx 0;

    .btn {
      display: block;
      width: 46%;
      height: 40px;
      line-height: 40px;
      text-align: center;
      color: #ffffff;
      border-radius: 0;
      font-size: 28upx;
      border-radius: 4px;
    }

    .cancel {
      background: #2979ff12;
      border: 1px solid #dcdfe6;
      color: #474e71;
    }

    .cancell {
      background: #2979ff;
      border: 1px solid #dcdfe6;
      color: #fff;
    }

    .submit {
      background: #0952c3;
    }
  }
}

page {
  background: #f9f9f9;
}

.otc {
  width: 100%;
  height: 100%;

  .bglist1 {
    background: #3e38ec;
    height: 20vw;
  }

  .bglist2 {
    display: flex;
    height: 40px;
    line-height: 40px;
    background: #ffffff;
    position: relative;
    top: -8vw;
    border-top-left-radius: 3vw;
    border-top-right-radius: 3vw;
    font-family: Times New Roman, Times, serif;
  }

  .bglist3 {
    position: relative;
    top: -10vw;
  }

  .side {
    position: absolute;
    top: 2vw;
    right: 0;
    left: 90vw;
  }

  .wrap {
    padding: 2vw;

    .center {
      min-width: 50px;
      min-height: 50px;
      display: block;
      position: relative;
      background-color: #d83535;
    }
  }

  .u-row {
    margin: 2vw 0;
  }

  .demo-layout {
    height: 8vw;
    border-radius: 8rpx;
  }

  .bg-purple {
    background: #d3dce6;
  }

  .bg-purple-light {
    background: #e5e9f2;
  }

  .bg-purple-dark {
    background: #99a9bf;
  }

  .income-card {
    width: 100%;
    background-color: #fff;
    border-radius: 1vw;
    padding: 2px;
    margin-top: 10px;
    border: 0.5px solid #5559691f;
  }

  .bic {
    position: relative;
    top: 0vw;
    right: -16vw;
    color: #b7b8bd;
    font-size: 3vw;
  }

  .apt {
    padding: 2vw 0;
    font-size: 12px;
    font-weight: 700;
  }

  .aptp {
    position: relative;
    font-size: 12px;
    font-weight: 700;
    top: 0vw;
    right: -11vw;
    padding: 2vw 0;
  }

  .aptpp {
    position: relative;
    top: 0vw;
    text-align: right;
    right: 2vw;
  }

  .tpc {
    font-size: 4vw;
    font-weight: 700;
  }

  .tpcc {
    font-size: 4vw;
    font-weight: 700;
    color: #4caf50;
  }

  .funsItemImage {
    position: relative;
    top: 1vw;
    width: 25px;
    height: 25px;
    right: 4px;
    border-radius: 0%;
  }

  .gman {
    position: relative;
    top: 0vw;
    width: 88%;
    //right: 0;
    text-align: right;
    //left: 70vw;
  }

  .tit uni-image {
    width: 5px;
    height: 10px;
    position: relative;
    top: 0vw;
    right: -26vw;
    color: #b7b8bd;
    font-size: 3vw;
  }

  .u-size-mini {
    display: inline-flex;
    width: auto;
    font-size: 14px;
    padding-top: 1px;
    height: 30px;
    line-height: 30px;
    padding: 0 10px;
    border-radius: 2px;
  }

  .juzon {
    text-align: right !important;
  }
  .juzonuc {
    position: relative;
    top: 0vw;
    left: 7vw;
    font-size: 14px;
    font-family: Times New Roman, Times, serif;
  }
  .juzonucg {
    text-align: left;
    font-size: 14px;
    padding: 0px 2px;
    font-weight: 700;
  }
  .juzonucom {
    border: 0.5px solid #7079ab24;
    border-radius: 8px;
    padding: 0px 4px;
  }
  .juzonup {
    text-align: right !important;
    position: relative;
    top: -2vw;
    left: 22vw;
  }

  .tool-card {
    background-color: #ffffff;
  }

  .fuwen {
    color: #ffffff;
    background-color: #3e38ec;
    width: 25px;
    height: 25px;
    line-height: 25px;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    border-radius: 30px;
  }
  .fuwenn {
    line-height: 25px;
    font-size: 16px;
    font-weight: 600;
  }

  .redee {
    color: #ff5722 !important;
    font-size: 16px !important;
    font-weight: 700 !important;
  }
  .greee {
    color: #4caf50 !important;
    font-size: 16px !important;
    font-weight: 700 !important;
  }
}
</style>
